// 引入normalize
@import 'normalize.scss';
// 引入swiper的scss
@import '../lib/swiper/swiper.min.scss';
//引入base
@import 'base.scss';
html,body {
  width: 100%;
}

// 计算尺寸函数
@function p2r($size){
  @return ($size / 32) * 1rem;
}

// 设置图片居中
// background center
@mixin bgc ($url,$width) {
  background: url($url) no-repeat center / 100% 100%;
  position: absolute;
  left: 50%;
  // 这里 使用margin-left来实现 左右居中的目的是 为了 后面动画中 我们要使用transform来改变元素
  margin-left: p2r(-$width / 2);
}

// 直接设置背景图 不考虑居中
@mixin bg($url) {
  background: url($url) no-repeat center / 100% 100%;
  position: absolute;
}

// 设置尺寸
@mixin size($width,$height) {
  width: p2r($width);
  height: p2r($height);
}

// loading 
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background-color: #ffece9;
  // 调整层级
  z-index: 3;
  .rider {
    @include size(154, 121);
    @include bg('../images/rider1.png');
    top: p2r(233);
    right: p2r(108);
  }
  .progress {
    width: p2r(416);
    height: p2r(20);
    background-color: #fc2e4d;
    border: 2px solid #373838;
    border-radius: p2r(20);
    position: absolute;
    left:50%;
    margin-left:(-416rem / 32 / 2);
    top:p2r(360);
  }
  .info{
    width: p2r(220);
    height: p2r(28);
    @include bgc('../images/loading_text.png',220);
    top:p2r(420);
  }
  .logo{
    width: (162rem / 32);
    height: (39rem / 32);
    @include bgc('../images/waimai_logo.png',162);
    bottom:(118rem / 32);
  }
  .copyright{
    font-size: (24rem / 32);
    color: #e0979d;
    position: absolute;
    bottom:(73rem / 32);
    width: 100%;
    text-align: center;
  }
}

//欢迎页面
.welcome {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: deepskyblue;
  z-index: 2;
  //顶部文字
  .info {
    width: (397rem / 32);
    height: (224rem / 32);
    @include bgc('../images/theme_title.png', 397);
    // background: url('../images/theme_title.png') no-repeat center / 100% 100%;
    // position: absolute;
    // left: 50%;
    // margin-left: (-397rem / 32 / 2);
    top: (42rem / 32);
    // hello 文字
    .hello {
      width: (75rem / 32);
      height: (75rem / 32);
      @include bg('../images/hello.png');
      top: (20rem / 32);
      right: (8rem / 32);
    }
  }
  // 熊盒子
  .bear-box{
    width: (167rem / 32);
    height: (279rem / 32);
    position: absolute;
    bottom: (346rem / 32);
    left: 50%;
    margin-left: (-167rem / 32 / 2);
    .bear{
      width: 100%;
      height: 100%;
      background: url('../images/rider2.png') no-repeat center / 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .smoke {
      width: (167rem / 32);
      height: (32rem / 32);
      background:url('../images/jet1.png') no-repeat center / 100% 100%;
      position: absolute;
      bottom: 0;
    }
  }
  .cloud {
    width: (640rem / 32);
    height: (673rem / 32);
    position: absolute;
    bottom: 0;
    background: url('../images/clouds.png') no-repeat center / 100% 100%;
  }
  .grass1{
    width: (640rem / 32);
    height: (396rem / 32);
    position: absolute;
    bottom: 0;
    background: url('../images/grass1.png') no-repeat center / 100% 100%;
  }
  .tree{
    width: (599rem / 32);
    height: (71rem / 32);
    position: absolute;
    bottom: (352rem / 32);
    background: url('../images/trees.png') no-repeat center / 100% 100%;
  } 
  .grass2{
    width: (640rem / 32);
    height: (228rem / 32);
    position: absolute;
    bottom: 0;
    background: url('../images/grass2.png') no-repeat center / 100% 100%;
  }
  // 旋转按钮的容器
  .rotate-btn-box{
    width: (208rem / 32);
    height: (208rem / 32);
    position: absolute;
    bottom:(86rem / 32);
    left: 50%;
    margin-left: (-208rem / 32 / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    .btn{
      width: (124rem / 32);
      height: (113rem / 32);
      background: url('../images/bear-btn-aft.png') no-repeat center / 100% 100%;
    }
    .circle1{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url('../images/circle1.png') no-repeat center / 100% 100%;
    }
    .circle2{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url('../images/circle2.png') no-repeat center / 100% 100%;
    }
  }
  
  //外卖之路
  .waimai-load {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 1.1875rem;
  }

}

// swiper 的样式
.waimai-container{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

//因为  title部分都有 我们直接把title的样式 移动到外面
.title{
  position: absolute;
  left: p2r(32);
  top: p2r(32);
  padding-left: p2r(20);
  h3{
    color:white;
    font-size: p2r(64);
  }
  p{
    color:white;
    padding-top: p2r(12);
    font-size: p2r(24);
  }
  .line{
    height: 0;
    width: p2r(5);
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
  }
}

// 轮播页面
.page1{
  background-color: #be8651;
  //轮播区域1
  .scroll-page1{
    .bg{
      @include bgc('../images/bg1.png', 576);
      @include size(576,573);
      bottom: p2r(252);
    }
    .person{
      @include bgc('../images/front1.png', 439);
      @include size(439,349);
      bottom: p2r(290);
      z-index: 1;
      .files{
        background: url('../images/papers.png');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: p2r(115) p2r(114);
        @include size(85, 50);
        position: absolute;
        bottom: p2r(104);
        left: p2r(27);
        .paper1{
          background: url('../images/papers.png');
          background-repeat: no-repeat;
          background-position: 0 p2r(-32);
          background-size: p2r(115) p2r(114);
          @include size(86, 26);
          position: absolute;
          bottom: p2r(45);
          left: p2r(-70);
        }
        .paper2{
          background: url('../images/papers.png');
          background-repeat: no-repeat;
          background-position: p2r(-45) 0;
          background-size: p2r(115) p2r(114);
          @include size(64, 20);
          position: absolute;
          bottom: p2r(80);
          right: 0;
        }
      }
    }
    .message-container{
      @include bg('../images/txt-bubb1.png');
      @include size(363,119);
      bottom: p2r(140);
      right: p2r(140);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index:1;
      .info{
        @include bg('../images/txt-work.png');
        @include size(220,30);
      }
    }
  }
  //轮播区域2
  .scroll-page2{
    .bg{
      @include bgc('../images/bg2.png', 582);
      @include size(582,520);
      bottom: p2r(252);
    }
    .person{
      @include bgc('../images/relax.png', 436);
      @include size(436,332);
      bottom: p2r(270);
      z-index: 1;
      .leg1{
        @include bg('../images/leg1.png');
        @include size(113, 24);
        bottom: p2r(110);
        left: p2r(195);
      }
      .leg2{
        @include bg('../images/leg2.png');
        @include size(85, 71);
        bottom: p2r(120);
        left: p2r(193); 
      }
    }
    .message-container{
      @include bg('../images/txt-bubb1.png');
      @include size(363,119);
      bottom: p2r(140);
      right: p2r(140);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      .info{
        @include bg('../images/txt-life.png');
        @include size(224,31);
      }
    }
  }
  //轮播区域3
  .scroll-page3{
    .bg{
      @include bgc('../images/bg3.png', 561);
      @include size(561,516);
      bottom: p2r(270);
    }
    .person{
      @include bgc('../images/person.png', 503);
      @include size(503,229);
      bottom: p2r(300);
      z-index: 1;
      .word1{
        @include bg('../images/word1.png');
        @include size(92,83);
        left: p2r(7);
        bottom: p2r(194);
      }
      .word2{
        @include bg('../images/word2.png');
        @include size(77,70);
        left: p2r(115);
        bottom: p2r(245);
      }
      .word3{
        @include bg('../images/word3.png');
        @include size(115,104);
        right: p2r(130);
        bottom: p2r(220);
      }
      .word4{
        @include bg('../images/word4.png');
        @include size(79,73);
        right: p2r(12);
        bottom: p2r(230);
      }
    }
    .message-container{
      @include bg('../images/txt-bubb1.png');
      @include size(363,119);
      bottom: p2r(140);
      right: p2r(140);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      .info{
        @include bg('../images/txt-res.png');
        @include size(224,31);
      }
    }
  }
  // 球
  .sphere{
    @include bgc('../images/sphere1.png', 640);
    @include size(640,356);
    bottom: p2r(0);
  }
  //熊
  .bear{
    @include bg('../images/bear1.png');
    @include size(178,134);
    right: p2r(38);
    bottom: 0;
  }
}
.page2{
  background-color: #ee4143;
  .bg{
    @include bgc('../images/bg4.png',592);
    @include size(592,490);
    bottom:p2r(330);
  }
  .bear{
    background: url('../images/bear2.png');
    background-repeat: no-repeat;
    // background-size: 100% 100%;
    background-size: p2r(368) p2r(427);
    background-position: p2r(-103) p2r(-96);
    position: absolute;
    bottom: p2r(310);
    left: 50%;
    @include size(227,336);
    margin-left: p2r(-227 / 2);
    z-index: 1;
    .face1{
      @include bg('../images/face1.png');
      @include size(102,102);
      position: absolute;
      top: 0;
      left: p2r(-102);
    }
    .face2{
      @include bg('../images/face2.png');
      @include size(101,102);
      position: absolute;
      top: p2r(-102);
      right: p2r(-101 / 2);
    }
    .hand-left{
      @include bg('../images/hand-left.png');
      @include size(74, 77);
      top: p2r(180);
      left: p2r(30);

    }
    .hand-right{
      @include bg('../images/hand-right.png');
      @include size(74, 77);
      top: p2r(180);
      right: p2r(30);
    }
  }
  .sphere{
    @include bg('../images/sphere2.png');
    @include size(640,356);
    bottom:0;
  }
  // 桌子
  .table {
    @include bgc('../images/table.png', 514);
    @include size(514, 258);
    bottom: p2r(140);
    z-index: 1;
  }
  // 食物
  .food {
    @include bgc('../images/foods.png', 354);
    @include size(354, 152);
    bottom: p2r(330);
    z-index: 1;
  }
}
.page3{
  background-color: #dd8a03;
  .bg{
    @include bgc('../images/bg5.png',592);
    @include size(592,580);
    bottom:p2r(300);
  }
  .bear{
    @include bgc('../images/bear3.png', 206);
    @include size(206, 321);
    bottom:p2r(195);
    z-index: 1;
  }
  .sphere{
    @include bg('../images/sphere3.png');
    @include size(640,356);
    bottom:0;
  }
  .license{
    @include bg('../images/license.png');
    @include size(197, 140);
    bottom:p2r(500);
    left:p2r(40);
  }
  .oil{
    @include bgc('../images/oil.png',205);
    @include size(205, 107);
    bottom:p2r(660);
  }
  .evil{
    @include bg('../images/evil.png');
    @include size(198, 163);
    bottom:p2r(480);
    right:p2r(30);
  }
}
.page4{
  background-color: #3fa100;
  .bg{
    @include bgc('../images/bg6.png',588);
    @include size(588,333);
    bottom:p2r(300);
  }
  .bear{
    @include bg('../images/bear4.png');
    @include size(309, 325);
    bottom:p2r(170);
    left:p2r(200);
    z-index: 1;
  }
  .sphere{
    @include bg('../images/sphere4.png');
    @include size(640,356);
    bottom:0;
  }
  .card1{
    @include bg('../images/card1.png');
    @include size(160, 175);
    bottom:p2r(435);
    left:p2r(32);
  }
  .card2{
    @include bgc('../images/card2.png',161);
    @include size(161, 209);
    bottom:p2r(530);
  }
  .card3{
    @include bg('../images/card3.png');
    @include size(167, 184);
    bottom:p2r(420);
    right:p2r(45);
  }
}
.page5{
  background-color: #0098cf;
  .bg{
    @include bgc('../images/bg7.png',594);
    @include size(594,493);
    bottom:p2r(300);
  }
  .bear{
    @include bgc('../images/rider2.png',230);
    @include size(230, 390);
    bottom:p2r(170);
    z-index: 1;
    .smoke{
      @include bgc('../images/shadow.png',114);
      @include size(114, 26);
      bottom:0;
    }
  }
  .sphere{
    @include bg('../images/sphere5.png');
    @include size(640,356);
    bottom:0;
  }
  .cloud{
    @include bgc('../images/weather-cloud.png',432);
    @include size(432,160);
    bottom:p2r(175+390+80);
  }
}
.page6{
  background-color: #b527a0;
  .bg{
    @include bgc('../images/bg8.png',588);
    @include size(588,333);
    bottom:p2r(300);
  }
  .bear{
    @include bgc('../images/bear5.png',285);
    @include size(285, 328);
    bottom:p2r(200);
    z-index: 1;
    .gift-box{
      position: absolute;
      top: 0;
      left: 50%;
      /* 
        为了避开 熊腿 旋转角度 不能转360
        350 / 12 = 29
      */
      .gift1{
        @include bgc('../images/gift1.png',35);
        @include size(35, 29);
      }
      .gift2{
        @include bgc('../images/gift2.png',93);
        @include size(93, 79);
      }
      .gift3{
        @include bgc('../images/gift3.png',72);
        @include size(72, 64);
      }
      .gift4{
        @include bgc('../images/gift4.png',91);
        @include size(91, 73);
      }
      .gift5{
        @include bgc('../images/gift5.png',99);
        @include size(99, 65);
      }
      .gift6{
        @include bgc('../images/gift6.png',107);
        @include size(107, 80);
      }
      .gift7{
        @include bgc('../images/gift7.png',107);
        @include size(107, 80);
      }
      .gift8{
        @include bgc('../images/gift8.png',88);
        @include size(88, 64);
      }
      .gift9{
        @include bgc('../images/gift9.png',78);
        @include size(78, 50);
      }
      .gift10{
        @include bgc('../images/gift10.png',49);
        @include size(49, 37);
      }
      .gift11{
        @include bgc('../images/gift11.png',51);
        @include size(51, 31);
      }
      .gift12{
        @include bgc('../images/gift11.png',37);
        @include size(37, 23);
      }
    }

    .gift-box{
      position: absolute;
      top: 0;
      left: 50%;
      /* 
        为了避开 熊腿 旋转角度 不能转360
        350 / 12 = 29
      */
      >div:nth-child(1){
        @include size(35, 29);
        transform: rotateZ(28deg) translateY(p2r(240));
      }
      >div:nth-child(2){
        @include size(93, 79);
        transform: rotateZ(28deg*2) translateY(p2r(240));
      }
      >div:nth-child(3){
        @include size(72, 64);
        transform: rotateZ(28deg*3) translateY(p2r(240));
      }
      >div:nth-child(4){
        @include size(91, 73);
        transform: rotateZ(28deg*4) translateY(p2r(240));
      }
      >div:nth-child(5){
        @include size(99, 65);
        transform: rotateZ(28deg*5) translateY(p2r(240));
      }
      >div:nth-child(6){
        @include size(107, 80);
        transform: rotateZ(28deg*6) translateY(p2r(240));
      }
      >div:nth-child(7){
        @include size(107, 80);
        transform: rotateZ(28deg*7) translateY(p2r(240));
      }
      >div:nth-child(8){
        @include size(88, 64);
        transform: rotateZ(28deg*8) translateY(p2r(240));
      }
      >div:nth-child(9){
        @include size(78, 50);
        transform: rotateZ(28deg*9) translateY(p2r(240));
      }
      >div:nth-child(10){
        @include size(49, 37);
        transform: rotateZ(28deg*10) translateY(p2r(240));
      }
      >div:nth-child(11){
        @include size(51, 31);
        transform: rotateZ(28deg*11) translateY(p2r(240));
      }
      >div:nth-child(12){
        @include size(37, 23);
        transform: rotateZ(28deg*12 - 5deg) translateY(p2r(240));
      }
    }
  }
  .sphere{
    @include bg('../images/sphere6.png');
    @include size(640,356);
    bottom:0;
  }
}
.page7{
  background-color: #19072a;
  .streetlight{
    @include bg('../images/streetlight.png');
    @include size(80, 443);
    bottom: p2r(300);
    left: p2r(240);
    .light{
      @include bg('../images/lamplight.png');
      @include size(437, 427);
      top: p2r(10);
      left: p2r(-140);
    }
  }
  .bear{
    @include bg('../images/bear6.png');
    @include size(276, 271);
    left: p2r(230);
    bottom: p2r(280);
  }
  .motobike{
    @include bg('../images/moto.png');
    @include size(200, 137);
    bottom: p2r(335);
    left:p2r(110);
  }

  .share{
    @include bgc('../images/share.png',379);
    @include size(379, 113);
    bottom: p2r(140);
  }
  .info{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: p2r(24);
    color:#b579d6;
    bottom:p2r(70);
  }
  .sphere{
    @include bg('../images/sphere7.png');
    @include size(640,384);
    bottom:0;
  }
}

/* 
  定义动画
*/
// 进度条动画
@keyframes steps{
  to{
    width: 100%;
  }
}
// 熊开车动画
@keyframes bearRide{
  10%{
    transform: translateX(p2r(-26*1)) translateY(p2r(-10));
  }
  20%{
    transform: translateX(p2r(-26*2)) translateY(p2r(10));
  }
  30%{
    transform: translateX(p2r(-26*3)) translateY(p2r(-10));
  }
  40%{
    transform: translateX(p2r(-26*4)) translateY(p2r(10));
  }
  50%{
    transform: translateX(p2r(-26*5)) translateY(p2r(-10));
  }
  60%{
    transform: translateX(p2r(-26*6)) translateY(p2r(10));
  }
  70%{
    transform: translateX(p2r(-26*7)) translateY(p2r(-10));
  }
  80%{
    transform: translateX(p2r(-26*8)) translateY(p2r(10));
  }
  90%{
    transform: translateX(p2r(-26*9)) translateY(p2r(-10));
  }
  100%{
    transform: translateX(p2r(-26*10)) translateY(p2r(10));
  }
}

//页面2 地动画
@keyframes grass1{
  from{}
  to{
    height: p2r(396);
  }
}

//直接调整样式 为动画的初始状态
/*
  为了可以走进度 在进度条中 添加子元素
*/
.loading {
  .progress{
    background-color: transparent;
    .step{
      height: 100%;
      width: 20%;
      background-color: #ff2947;
      position: absolute;
      right: 0;
    }
  }
}

//触发动画
.loading.animate{
  .step{
    animation: steps 1s linear forwards;
  }
  .rider{
    animation: bearRide 1s linear forwards;
  }
}


//页面2 草2动画 大->小
@keyframes grass2{
  from{
    transform: scale(2,1);
  }
  to{
    opacity: 1;
    // 没有写就用自己默认的transform
  }
}

// 页面2 树动画
@keyframes trees{
  from{
    transform: translateY(-200%);
  }
  80%{
    transform: translateY(10%);
    opacity: 1;
  }
  90%{
    transform: translateY(-10%);
    opacity: 1;
  }
  100%{
    transform: none;
    opacity: 1;
  }
}
// 页面2 按钮从0到1的动画
@keyframes btnAppear{
  from{}
  to{
    opacity: 1;
    transform: none;
  }
}
// 旋转动画
@keyframes rotate{
  from{}
  to{
    transform: rotate(360deg);
  }
}
@keyframes bearDown{
  from{
    transform: translateY(-50%);
  }
  to{
    transform: none;
    opacity: 1;
  }
}

@keyframes upandDown{
  from{
    transform: translateY(-5%);
  }
  to{
    transform: none;
  }
}

@keyframes small2big{
  from{
    transform: scale(0,0);
  }
  to{
    transform: none;
    opacity: 1;
  }
}

//熊 向下移动 透明度 变成0 变大
// 使用动画时 就不要再与transition混合使用
@keyframes bearDisappear{
  from{
    // 动画开始时 透明度是1
    opacity: 1;
  }
  to{
    transform: translateY(100%) scale(1.5,1.5);
    opacity: 0;
  }
}


// 欢迎页的默认样式
.welcome{
  .grass1{
    height: p2r(20);
  }
  .grass2{
    opacity: 0;
  }
  .tree{
    opacity: 0;
  }
  .rotate-btn-box{
    opacity: 0;
    transform: scale(0,0);
  }
  .bear-box{
    opacity: 0;
  }
  .smoke{
    opacity: 0;
  }
  .info{
    opacity: 0;
  }
  .hello{
    opacity: 0;
  }
}
.welcome.animate{
  .grass1{
    animation: grass1 .5s forwards;
  }
  .grass2{
    animation: grass2 .5s .5s forwards;
  }
  .tree{
    animation: trees .5s 1s forwards;
  }
  .rotate-btn-box{
    animation: btnAppear .5s 1.5s forwards;
  }
  .circle2{
    animation: rotate 1s infinite linear;
  }
  .bear-box{
    animation: bearDown .5s 2s forwards;
  }
  .bear{
    animation: upandDown .5s 2.5s infinite;
  }
  .smoke{
    animation: small2big .5s 2.5s infinite;
  }
  .info{
    animation: bearDown .5s 3s forwards;
  }
  .hello{
    animation: small2big .5s 3.5s forwards;
  }
}

@keyframes right2left{
  from{
    transform: translateX(100%);
  }
  to{
    transform: none;
    opacity: 1;
  }
}
@keyframes heightBigger{
  from{

  }
  to{
    height: 100%;
  }
}
//由于所有的title的动画时一样的结构
.title{
  h3{
    opacity: 0;
  }
  p{
    opacity: 0;
  }
  .line{
    height: 0%;
  }
}

.swiper-slide.animate{
.title{
    h3{
      animation: right2left .5s forwards;
    }
    p{
      animation: right2left .5s forwards;
    }
    .line{
      animation: heightBigger .5s .5s forwards;
    }
  }
}

// 旋转进来 --- 停一会 --- 转出去
@keyframes rotateInOut{
  0%{
    transform: rotateZ(90deg);
  }
  25%{
    transform: rotateZ(-5deg);
    opacity: 1;
  }
  30%{
    transform: rotateZ(0);
    opacity: 1;
  }
  65%{
    transform: rotateZ(0);
    opacity: 1;
  }
  70%{
    transform: rotateZ(5deg);
    opacity: 1;
  }
 100%{
    transform: rotateZ(-90deg);
    opacity: 0;
  }
}
// 旋转进来--不出去
@keyframes rotateInNotOut{
  0%{
    transform: rotateZ(90deg);
  }
  95%{
    transform: rotateZ(-5deg);
    opacity: 1;
  }
  100%{
    transform: rotateZ(0);
    opacity: 1;
  }
}

// 上下左右的 晃动
@keyframes runUpDownLeftRight{
  25%{
    transform: translateX(10%) translateY(0%);
  }
  50%{
    transform: translateX(-10%) translateY(10%);
  }
  75%{
    transform: translateX(0%) translateY(-10%);
  }
  100%{
    transform: translateX(0%) translateY(0%);
  }
}
@keyframes left2Right2left{
  30%{
    transform: translateX(-100%);
  }
  60%{
    transform: translateX(100%);
  }
  100%{
    transform:none;
  }
}

// 腿旋转回来
@keyframes rotateBack{
  from{}
  to{
    transform: none;
  }
}


// 牌子 旋转进来

// 区域1中的轮播部分
.page1{
  .scroll-page1{
    .bg{
      opacity: 0;
      transform-origin: 50% 200%;
    }
    .person{
      opacity: 0;
      transform-origin: 50% 200%;
      .paper1{
        animation: left2Right2left 1s infinite;
      }
      .paper2{
        animation: left2Right2left .5s infinite;
      }
    }
    .message-container{
      opacity: 0;
      transform-origin: right bottom;
    }
  }
  .scroll-page2{
    .bg{
      opacity: 0;
      transform-origin: 50% 200%;
    }
    .person{
      opacity: 0;
      transform-origin: 50% 200%;
      .leg2{
        transform-origin: left bottom;
        transform:rotateZ(30deg);
      }
    }
    .message-container{
      opacity: 0;
      transform-origin: right bottom;
    }
  }
  .scroll-page3{
    .bg{
      opacity: 0;
      transform-origin: 50% 200%;
    }
    .person{
      opacity: 0;
      transform-origin: 50% 200%;
    }
    .message-container{
      opacity: 0;
      transform-origin: right bottom;
    }
  }
}
.page1.animate{
  .scroll-page1{
    .bg{
      animation: rotateInOut 1.5s forwards;
    }
    .person{
      animation: rotateInOut 1.5s .2s forwards;
    }
    .message-container{
      animation: rotateInOut 1s .5s forwards;
    }
  }
  .scroll-page2{
    .bg{
      animation: rotateInOut 1.5s 1.7s forwards;
    }
    .person{
      animation: rotateInOut 1.5s 1.9s forwards;
      .leg2{
        animation: rotateBack .5s 2.2s forwards;
      }
    }
    .message-container{
      animation: rotateInOut 1s 2.2s forwards;
    }
  }
  .scroll-page3{
    .bg{
      animation: rotateInNotOut .5s 3.4s forwards;
    }
    .person{
      animation: rotateInNotOut .5s 3.6s forwards;
    }
    .message-container{
      animation: rotateInNotOut .5s 3.9s forwards;
    }
    .word1{
      animation: runUpDownLeftRight 1s infinite;
    }
    .word2{
      animation: runUpDownLeftRight .5s infinite;
    }
    .word3{
      animation: runUpDownLeftRight 1.2s infinite;
    }
    .word4{
      animation: runUpDownLeftRight 2s infinite;
    }
  }
}
// 底部往上
@keyframes bottom2Top{
  from{
    transform: translateY(100%);
  }
  to{
    transform:none;
    opacity: 1;
  }
}
// 小变大 再小
@keyframes small2big2small{
  from{
    transform: scale(0,0);
  }
  95%{
    transform: scale(1.2,1.2);
    opacity: 1;
  }
  100%{
    transform:none;
    opacity: 1;
  }
}
// 晃动的小手
@keyframes leftShake{
  30%{
    transform: rotateZ(20deg);
  }
  60%{
    transform: rotateZ(-20deg);
  }
  100%{
    transform: none;
  }
}


// 页面2的初始样式
.page2{
	.bear{
		opacity: 0;
		.face1{
			opacity: 0;
		}
		.face2{
			opacity: 0;
		}
		.hand-left{
			transform-origin: left top;
		}
		.hand-right{
			transform-origin: right top;
		}
	}
	.table{
		opacity: 0;
	}
	.food{
		opacity: 0;
	}
	.bg{
		opacity: 0;
		transform-origin: 50% 200%;
	}
}
.page2.animate{
	.bg{
		animation: rotateInNotOut .5s forwards;
	}
	.table{
		animation: bearDown .5s .5s forwards;
	}
	.bear{
		animation: bottom2Top .5s 1s forwards;
		.face1{
			animation: samll2big2samll .5s 2s forwards;
		}
		.face2{
			animation: samll2big2samll .5s 2s forwards;
		}
		.hand-left{
			animation: leftShake .5s infinite;
		}
		.hand-right{
			animation: leftShake .8s infinite;
		}
	}
	.food{
		animation: bearDown .5s 1.5s forwards;
	}
}
// .bg{
//   transform-origin: 50% 200%;
// }
// 页面3的初始样式
.page3{
 .bg{
   opacity: 0;
   transform-origin: 50% 200%;
 }
 .bear{
  opacity: 0;
 }
 .license{
  opacity: 0;
 }
 .oil{
  opacity: 0;
 }
 .evil{
  opacity: 0;
 }
}
.page3.animate{
  .bg{
    animation: rotateInNotOut .5s forwards;
  }
  .bear{
    animation: bearDown .5s .5s forwards;
  }
  .license{
    animation: small2big2small .5s 1s forwards,runUpDownLeftRight .5s 1.5s infinite;
  }
  .oil{
    animation: small2big2small .5s 1s forwards,runUpDownLeftRight .5s 1.5s infinite;
  }
  .evil{
    animation: small2big2small .5s 1s forwards,runUpDownLeftRight .5s 1.5s infinite;
  }
}

// 防止 溢出滚动
.waimai-container{
  overflow: hidden;
}

// 页面3 踢牌子熊的样式
.page3{
  .animation-bear-box {
    .animate-bear1{
      @include bgc('../images/bear3-1.png', 251);
      bottom:6.09375rem;
      @include size(251,335);
      z-index: 1;
      opacity: 0;
    }
    .animate-bear2{
      @include bgc('../images/bear3-2.png', 215);
      bottom:6.09375rem;
      @include size(251,313);
      z-index: 1;
      opacity: 0;
    }
    .animate-bear3{
      @include bgc('../images/bear3-3.png', 290);
      bottom:6.09375rem;
      @include size(290,321);
      z-index: 1;
      opacity: 0;
    }
  }

  // 牌子的 默认样式
  .hit-card-box{
    .card1{
      @include bg('../images/license1.png');
      @include size(228,151);
      bottom:15.628rem;
      left: 1.25rem;
      opacity: 0;
    }
    .card2{
      @include bgc('../images/oil1.png',231);
      @include size(231,156);
      bottom:20.625rem;
      opacity: 0;
    }
    .card3{
      @include bg('../images/evil1.png');
      @include size(211,173);
      bottom:15rem;
      right: 0.9375rem;
      opacity: 0;
    }
  }
}


// 页面4 默认的初始样式
.page4{
  .bg{
    opacity: 0;
  }
  .bear{
    opacity: 0;
  }
  .card1{
    opacity: 0;
  }
  .card2{
    opacity: 0;
  }
  .card3{
    opacity: 0;
  }
} 
.page4.animate{
  .bg{
    animation: rotateInNotOut .5s forwards;
  }
  .bear{
    animation: bearDown .5s .5s forwards;
  }
  .card1{
    animation: small2big2small .5s 1s forwards;
  }
  .card2{
    animation: small2big2small .5s 1s forwards;
  }
  .card3{
    animation: small2big2small .5s 1s forwards;
  }
}

@keyframes snowLeft{
  from{}
  50%{
    opacity: 1;
  }
  to{
    transform: translateY(1000%) translateX(-200%);
    opacity: 1;
  }
}
@keyframes snowRight{
  from{}
  50%{
    opacity: 1;
  }
  to{
    transform: translateY(1000%) translateX(200%);
    opacity: 1;
  }
}
// 页面5 默认的初始化样式
.page5{
  .bg{
    opacity: 0;
  }
  .bear{
    opacity: 0;
  }
  .cloud{
    opacity: 0;
    // 添加雪片的样式
    .snow{
      @include bg('../images/snow-piece.png');
      @include size(32,32);
      bottom:0;
      opacity: 0;
    }
    .snow:nth-child(2){
      left:p2r(32);
    }
    .snow:nth-child(3){
      left:p2r(32*2);
    }
    .snow:nth-child(4){
      left:p2r(32*3);
    }
    .snow:nth-child(5){
      left:p2r(32*4);
    }
    .snow:nth-child(6){
      left:p2r(32*5);
    }
  }
  .smoke{
    opacity: 0;
  }
}
.page5.animate{
  .bg{
    animation: rotateInNotOut .5s forwards;
  }
	.bear{
    animation: bearDown .5s .5s forwards, upandDown .5s .5s infinite;
	}
  .smoke{
    animation: small2big .5s 1s infinite;
  }
  .cloud{
    animation: small2big2small .5s 1s forwards, runUpDownLeftRight 1s 1.5s infinite;
    .snow:nth-child(1){
      animation: snowLeft .5s 1.5s infinite;
    }
    .snow:nth-child(2){
      animation: snowRight .3s 1.5s infinite;
    }
    .snow:nth-child(3){
      animation: snowLeft 1s 1.5s infinite;
    }
    .snow:nth-child(4){
      animation: snowRight 2s 1.5s infinite;
    }
    .snow:nth-child(5){
      animation: snowLeft .1s 1.5s infinite;
    }
    .snow:nth-child(6){
      animation: snowRight .8s 1.5s infinite;
    }
  }
}

// transform 默认是none 还原为自己初始的样式
@keyframes none2Normal{
  from{
    transform: none;
  }
  to{
    opacity: 1;
  }
}
@keyframes big2small{
  from{}
  to{
    transform: scale(0,0);
    opacity: 0;
  }
}
//页面6 默认的初始样式
.page6{
  .gift-box>div{
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
  }
}
.page6.animate{

  @for $i from 1 through 12 {
    .gift-box>div:nth-child(#{$i}){
      animation: none2Normal 2s ($i*0.1s) infinite;
    }
  }

  @for $i from 1 through 12 {
    .gift-box>div:nth-child(#{$i})>div{
      animation: rotate 1s ($i*0.1s) infinite;
    }
  }

}

// 播放按钮的样式
.audioControl{
  @include size(36,36);
  position: absolute;
  top:p2r(32);
  right: p2r(32);
  background: url('../images/pause.png') no-repeat center / 100% 100%;
  z-index:998;
}